<template>
  <div>
    <el-header>
      <el-row>
        <el-col :span=12 style="text-align: left;font-size: larger">
          欢迎来到心理健康咨询系统
        </el-col>
        <el-col :span=12 style="text-align: right">
          <el-button type="primary" v-if="!token" size="small" round plain @click="loginShow">登录</el-button>
          <el-button type="primary" v-else size="small" round plain @click="logout">注销</el-button>
        </el-col>
      </el-row>

    </el-header>

    <Custom_menu></Custom_menu>
    <div style="height: 850px">
      <router-view></router-view>
    </div>


    <el-footer>保持对生活的热爱，微笑面对每一天</el-footer>

    <!--  登录弹窗  -->
    <div class="add-form">

      <el-dialog title="登录" :visible.sync="dialogFormVisible">

        <el-form ref="dataAddForm" :model="formData" label-position="right" label-width="100px">

          <el-row>
            <el-form-item label="账号" prop="title">
              <el-input v-model="formData.username" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="密码" prop="title">
              <el-input v-model="formData.password" type="password" />
            </el-form-item>
          </el-row>


        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="info" @click="register()">没有账号？点此注册</el-button>
          <el-button @click="cancel()">暂不登录</el-button>
          <el-button type="primary" @click="login()">登录</el-button>
        </div>
      </el-dialog>
    </div>

    <!--  注册弹窗  -->
    <div class="add-form">

      <el-dialog title="注册" :visible.sync="dialogFormVisibleAdd">

        <el-form ref="dataAddForm" :model="formData" label-position="right" label-width="100px">

          <el-row>
            <el-form-item label="账号" prop="title">
              <el-input v-model="formData.username" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="密码" prop="title">
              <el-input v-model="formData.password" type="password" />
            </el-form-item>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">暂不注册</el-button>
          <el-button type="primary" @click="RegisterAdd()">注册</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Card from "@/components/custom/card";
import NewsShow from "@/components/custom/NewsShow";
import ArticleShow from "@/components/custom/ArticleShow";
import Custom_menu from "@/components/custom/custom_menu";
import Custom_searching from "@/components/custom/custom_searching";
import axios from "axios";

export default {
  name: "Custom",
  components: { Custom_searching, ArticleShow, NewsShow, Card, Custom_menu },
  data() {
    return {
      formData: {},
      dialogFormVisible: false,
      dialogFormVisibleAdd: false,
    }
  },
  computed: {
    token() {
      return window.sessionStorage.getItem("token")
    }
  },

  methods: {
    loginShow() {
      this.dialogFormVisible = true;
    },
    cancel() {
      this.dialogFormVisible = false;
      this.dialogFormVisibleAdd = false;
    },
    login() {
      axios
        .post("/login-service/user/login/", {
          username: this.formData.username,
          password: this.formData.password
        })
        .then(res => {
          console.log("输出response.data.status", res.data.flag);
          if (res.data.flag) {
            window.sessionStorage.setItem("token", res.data.data.id)
            this.dialogFormVisible = false;
          } else {
            alert("您输入的用户名或密码错误！");
          }

        })
    },
    logout() {
      window.sessionStorage.removeItem("token");
      location.reload();

    },
    register() {
      this.dialogFormVisibleAdd = true;
    },
    RegisterAdd() {
      if (!this.formData.username) {
        this.$message.error("请输入用户名！");
        return;
      } else if (!this.formData.password) {
        this.$message.error("请输入密码！");
        return;
      } else {
        // this.$router.push({ path: "/" }); //无需向后台提交数据，方便前台调试
        axios
          .post("/login-service/user/regist/", {
            username: this.formData.username,
            password: this.formData.password
          })
          .then(res => {
            // console.log("输出response.data", res.data);
            // console.log("输出response.data.status", res.data.status);
            if (res.data.flag) {
              this.$message.success("注册成功！");
              this.dialogFormVisibleAdd = false;
              this.dialogFormVisible = true;
            } else {
              alert("您输入的用户名已存在！");
            }
          });
      }
    }
  }

}
</script>

<style scoped>
.el-header {
  background-color: rgba(255, 129, 108, 1);
  color: #ffffff;
  text-align: center;
  font-size: large;
  line-height: 60px;
  width: 100%;
}

.el-footer {
  background-color: rgba(255, 129, 108, 1);
  color: #ffffff;
  text-align: center;
  line-height: 60px;
  width: 100%;
}
</style>